<script setup lang="ts">
  import { defineProps, ref, watch, reactive } from 'vue';
  import { useBooleanStore } from '@/store';
  import { TableRowSelection } from '@arco-design/web-vue';

  const props = defineProps<{
    tableData: any;
  }>();
  const columns: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
      ellipsis: true,
      tooltip: true,
      width: 80,
      fixed: 'left',
    },
    {
      title: 'AO号',
      dataIndex: 'aoNo',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      ellipsis: true,
      tooltip: true,
      width: 220,
    },
    {
      title: '标准件条码',
      dataIndex: 'ckBarcode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 240,
    },

    {
      title: '物料名称',
      dataIndex: 'itemName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 150,
    },
    {
      title: '数量',
      dataIndex: 'deliveryQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '物料大类',
      dataIndex: 'itemType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '需求单位',
      dataIndex: 'requireShop',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '限用架次',
      dataIndex: 'xLimitLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '最长保管期',
      dataIndex: 'maxStorageDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '接收备注',
      dataIndex: 'receiveRemark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 150,
    },
    {
      title: 'ERP备注',
      dataIndex: 'Remark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 150,
    },
    {
      title: '移交人工号',
      dataIndex: 'empName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 140,
    },

    {
      title: '移交时间',
      dataIndex: 'deliveryDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 200,
    },
    {
      title: '协调单状态',
      dataIndex: 'isCoor',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 150,
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 100,
    },

    {
      title: '批次',
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 100,
    },
    {
      title: '起始架次',
      dataIndex: 'startLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },

    {
      title: '截止架次',
      dataIndex: 'endLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '计量单位',
      dataIndex: 'mdsUnit',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '制造单位',
      dataIndex: 'attribute18',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
      ellipsis: true,
      tooltip: true,
      width: 120,
    },
    {
      title: '油封期',
      width: 180,
      ellipsis: true,
      tooltip: true,
      dataIndex: 'SEAL_DATE',
    },
    {
      title: '复试日期',
      width: 200,
      ellipsis: true,
      tooltip: true,
      dataIndex: 'RETEST_DATE',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    // {
    //   title: '操作',
    //   dataIndex: 'action',
    //   slotName: 'action',
    //   align: 'center',
    //   fixed: 'right',
    // },
  ];
  const columnsTwo: any[] = [
    {
      title: '序号',
      dataIndex: 'id',
      slotName: 'id',
      align: 'center',
      fixed: 'left',
      width: 80,
    },
    {
      title: 'AO号',
      dataIndex: 'aoNo',
      width: 200,
    },
    {
      title: '图号',
      dataIndex: 'itemCode',
      width: 200,
    },
    {
      title: '质量编号',
      dataIndex: 'qualityCode',
      width: 200,
    },
    {
      title: '版本号',
      width: 120,
      ellipsis: true,
      tooltip: true,
      dataIndex: 'version',
    },
    {
      title: '工艺状态号',
      width: 120,
      ellipsis: true,
      tooltip: true,
      dataIndex: 'processStatusNo',
    },
    {
      title: '版本号',
      width: 120,
      ellipsis: true,
      tooltip: true,
      dataIndex: 'version',
    },
    {
      title: '工艺状态号',
      width: 120,
      ellipsis: true,
      tooltip: true,
      dataIndex: 'processStatusNo',
    },
    {
      title: '限用架次',
      dataIndex: 'xLimitLotNo',
      width: 100,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '最长保管期',
      dataIndex: 'maxStorageDate',
      width: 160,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '机型',
      dataIndex: 'productCode',
      width: 160,
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '批次',
      width: 100,
      dataIndex: 'batchNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '起始架次',
      width: 100,
      dataIndex: 'startLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '截止架次',
      width: 100,
      dataIndex: 'endLotNo',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '计量单位',
      width: 100,
      dataIndex: 'mdsUnit',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '数量',
      width: 100,
      dataIndex: 'deliveryQty',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '物料大类',
      width: 140,
      dataIndex: 'itemType',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '制造单位',
      width: 140,
      dataIndex: 'attribute18',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '移交人工号',
      width: 140,
      dataIndex: 'empName',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '移交时间',
      width: 180,
      dataIndex: 'deliveryDate',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '协调单状态',
      width: 140,
      dataIndex: 'isCoor',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    {
      title: '备注',
      width: 180,
      dataIndex: 'remark',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '交接单ID',
      width: 180,
      dataIndex: 'wmsDeliveryPlanId',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },

    // {
    //   title: '操作',
    //   dataIndex: 'action',
    //   slotName: 'action',
    //   align: 'center',
    //   fixed: 'right',
    // },
  ];
  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });

  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  const localTableDataTWo = ref<any[]>([]);
  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNum = ref<number>(1);
  const pageSize = ref<number>(30);
  const pageSizeOptions = ref<number[]>([30, 50, 100, 500]);
  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<any>([]);

  // 监听props.tableData的变化，并更新本地副本
  watch(
    () => props.tableData,
    () => {
      localTableData.value = props.tableData?.list || [];
      total.value = props.tableData?.total || 0;
    },
    { immediate: true }
  );
  async function updateRemark(record: any) {
    booleanStore.setRow(record);
    booleanStore.toggleBool2(3);
  }
  function change(e: any) {
    pageNum.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }

  const isExpired = (sealDate: any): boolean => {
    // 检查 sealDate 是否为有效日期
    if (sealDate === null || sealDate === '') {
      return false; // 如果日期无效，返回未过期
    }

    const currentDate = new Date(); // 获取当前时间的时间戳
    const sealDateObj = new Date(sealDate); // 将油封为时间戳
    const diffTime = currentDate.getTime() - sealDateObj.getTime(); // 计算时间差（毫秒）
    const diffDays = diffTime / (1000 * 60 * 60 * 24); // 转换为天数
    return diffDays > -90;
  };

  const setRowNameTWo = (record: any) => {
    return isExpired(record.SEAL_DATE) ? 'expired-item' : '';
  };

  // 监听页面变化
  watch([pageNum, pageSize], () => {
    booleanStore.setPage(pageNum.value, pageSize.value, 6);
  });
  watch(
    () => booleanStore.list,
    () => {
      if (booleanStore.num7 === 8) {
        // 待接收物料
        localTableDataTWo.value = booleanStore.list;
        // 默认全选
        for (let i = 0; i < localTableDataTWo.value[0]?.length; i += 1) {
          if (
            !selectedKeys.value.includes(
              localTableDataTWo.value[0][i].wmsDeliveryPlanId
            )
          )
            selectedKeys.value.push(
              localTableDataTWo.value[0][i].wmsDeliveryPlanId
            );
        }
      }
    }
  );
  watch(
    selectedKeys,
    () => {
      const selectedData = localTableDataTWo.value[0].filter((item: any) =>
        selectedKeys.value.includes(item.wmsDeliveryPlanId)
      );

      const data: any = [];
      selectedData.forEach((item: any) => {
        data.push({
          barcode: item.barcode,
          deliveryQty: item.deliveryQty,
          itemCode: item.itemCode,
          wmsDeliveryPlanId: item.wmsDeliveryPlanId,
        });
      });

      booleanStore.setListTwo(data);
    },
    { deep: true }
  );
</script>

<template>
  <div style="padding: 0px 16px">
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :sticky-header="true"
      :data="localTableData"
      :scroll="{ y: 400 }"
      style="height: 250px"
      :row-class="setRowNameTWo"
      column-resizable
    >
      <template #id="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        :page-size-options="pageSizeOptions"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </div>

  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font"
        >待接收标准件列表(共{{
          localTableDataTWo[0] ? localTableDataTWo[0].length : 0
        }}条)</div
      >
    </template>

    <a-table
      v-model:selectedKeys="selectedKeys"
      :stripe="true"
      style="white-space: nowrap"
      :columns="columnsTwo"
      :data="localTableDataTWo[0]"
      :row-selection="rowSelection"
      row-key="wmsDeliveryPlanId"
      column-resizable
    >
      <template #id="{ record }">{{
        localTableDataTWo[0].indexOf(record) + 1
      }}</template>
    </a-table>
  </a-card>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
    z-index: 1;
  }
  .page-position {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  :deep(.expired-item > .arco-table-td) {
    color: red !important;
  }
</style>
